<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form>
            账号：<input type="text" v-model="account">
            <br>
            密码：<input type="password" v-model="password">
            <br>
            性别：
            <br>
            男<input type="radio" value="man" v-model="sex">
            女<input type="radio" value="weman" v-model="sex">
            <br>
            爱好：
            学习
            <input type="checkbox" value="study" v-model="hobby">
            打游戏
            <input type="checkbox" value="game"  v-model="hobby">
            打篮球
            <input type="checkbox" value="basketball" v-model="hobby">
            <br>
            校区：
            <select>
                <option value="beijing" v-model="city">北京</option>
                <option value="sichuan" v-model="city">四川</option>
                <option value="xi'an" v-model="city">西安</option>
            </select>
            <br>
            其他：
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <br>
            <input type="checkbox" v-model="city">阅读并接受<a href="http://www.baidu.com">用户协议</a></input>
            <br>
            <button>提交</button>
        </form>
    </div>
</body>
<script>
    new Vue({
        el: "#root",
        data: {
            account:'',
            password:'',
            sex: 'weman',
            hobby:[],
            city: ''

        },
        methods: {

        }
    })
</script>
</html>